import { Row, Col,Input, Button, Form, Flex, notification, Space } from "antd";
import { FormInstance, useForm } from "antd/lib/form/Form";
import moment from "moment";
import React, { useEffect, useState } from "react";

import {CopyToClipboard} from 'react-copy-to-clipboard';
    
let intervalId:  NodeJS.Timeout | undefined = undefined
const TimestampTool:React.FC = ()=>{

    const formRef = React.useRef<FormInstance>(null);
    const  [currentDateTime,setCurrentDateTime]  = useState<string>('')
    const  [timestampDateTime,setTimestampDateTime]  = useState<string>('')
    const  [currentTimestamp,setCurrentTimestamp]  = useState<number>(0)
    const  [currentMsTimestamp,setCurrentMsTimestamp]  = useState<number>(0)
    const  [runStatus,setRunStatus]  = useState<boolean>(true)
    // const  [intervalId,setIntervalId]  = useState<>('')
    const encode = ()=>{
 
    }
    const dncode = ()=>{
  
    }
    const startTimer = ()=>{
        intervalId = setInterval(()=>{
            let dateTime = moment().format("YYYY-MM-DD hh:mm:ss")
            setCurrentDateTime(dateTime)
            const ms = (+new Date())
            const sd = parseInt(''+(+new Date())/1000)
            setCurrentTimestamp(sd)
            setCurrentMsTimestamp(ms)
            formRef.current?.setFieldsValue({currentDateTime:dateTime,currentTimestamp:sd,currentMsTimestamp:ms})
        },1000)
    }
    useEffect(()=>{
        startTimer()
        return ()=>{
            if(intervalId){
                clearInterval(intervalId)
            }
        }
    },[])
    const styels = {}
    const changeTimerStatus = ()=>{
        if(runStatus){
            clearInterval(intervalId)
        }else{
            startTimer()
        }
        setRunStatus(!runStatus)
    }
    return <>
        <Form ref={formRef}>
            
            <Flex  vertical={true}>
                                <Flex  style={{marginBottom:'20px'}} justify={"flex-start"} align={"center"}>
                                    <Space>
                                    <Form.Item style={{margin:0}} label="当地当前时间" name="currentDateTime">
                                        <Input   style={styels} />
                                    </Form.Item>
                                        <CopyToClipboard text={currentDateTime}>
                                            <Button>复制</Button>
                                        </CopyToClipboard>
                                        <Button onClick={changeTimerStatus}>{runStatus?"暂停":"运行"}</Button>
                                    </Space>

                                </Flex>

                                <Flex  style={{marginBottom:'20px'}} justify={"flex-start"} align={"center"}>
                                    <Space>
                                    <Form.Item style={{margin:0}} label="当前时间戳（秒）" name="currentTimestamp">
                                        <Input  disabled style={styels} />
                                    </Form.Item>
                                        <CopyToClipboard text={''+currentTimestamp}>
                                            <Button>复制</Button>
                                        </CopyToClipboard>
                                        <Form.Item style={{margin:0}} label="当前毫秒" name="currentMsTimestamp">
                                        <Input  disabled style={styels} />
                                    </Form.Item>
                                        <CopyToClipboard text={''+currentMsTimestamp}>
                                            <Button>复制</Button>
                                        </CopyToClipboard>
                                    </Space>

                                </Flex>

                                <Flex  style={{marginBottom:'20px'}} justify={"flex-start"} align={"center"}>
                                    <Space>
                                    <Form.Item style={{margin:0}} label="时间戳（秒|毫秒）" >
                                        <Input onBlur={(v:{currentTarget:HTMLInputElement})=>{
                                            if(v.currentTarget.value){
                                                let sd = parseInt(v.currentTarget.value)
                                                if(v.currentTarget.value.length == 13){
                                                        sd = sd/1000
                                                }
                                                let m = moment.unix(sd).format("YYYY-MM-DD hh:mm:ss")
                                                formRef.current?.setFieldsValue({timestampDateTime:m})
                                                setTimestampDateTime((m))
                                            }

                                        }}  style={styels} />
                                    </Form.Item>
                                    <Form.Item style={{margin:0}} label="日期" name="timestampDateTime" >
                                        <Input />
                                    </Form.Item>
                                        <CopyToClipboard text={''+timestampDateTime}>
                                            <Button>复制</Button>
                                        </CopyToClipboard>
                                    </Space>

                                </Flex>
        </Flex>

        
                
        </Form>
    </>
}
export default TimestampTool;